<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta Tags -->
    <title>关于我们 - Linux.do 数据分析工具 | 项目介绍与团队信息</title>
    <meta name="description" content="了解 Linux.do 数据分析工具的开发背景、技术架构、团队信息和项目愿景。我们致力于为 Linux.do 社区提供专业的数据分析服务。">
    <meta name="keywords" content="Linux.do团队,项目介绍,开发背景,技术架构,社区工具,开源项目">
    <meta name="author" content="Linux.do Community">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="关于我们 - Linux.do 数据分析工具">
    <meta property="og:description" content="了解项目背景、技术架构和团队信息">
    <meta property="og:site_name" content="Linux.do Analyzer">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="关于我们 - Linux.do 数据分析工具">
    <meta name="twitter:description" content="项目介绍与团队信息">

    <!-- TailwindCSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
      integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/js/fontawesome.min.js"
      integrity="sha512-obFNtQ1JKCrxPBPLmYDUevlriATl5EhvwU3CFtdW/HKOkeAe0bbsyZfHO44/f1QyndrZJ464TQvrRP9ZjyXSSA=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="min-h-screen" style="background: var(--background-gradient)">

    <!-- Navigation -->
    <nav class="sticky top-0 z-50 backdrop-blur-md border-b" style="background: var(--card-bg); border-color: var(--border-color);">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="flex items-center space-x-2 text-xl font-bold" style="color: var(--primary-color);">
                        <span>📊</span>
                        <span>Linux.do 数据分析</span>
                    </a>
                </div>

                <!-- 桌面端导航 -->
                <div class="hidden md:flex items-center space-x-6">
                    <a href="index.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        数据分析
                    </a>
                    <a href="help.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        使用帮助
                    </a>
                    <a href="about.html" class="nav-link current transition-colors" style="color: var(--primary-color); font-weight: 600;">
                        关于我们
                    </a>
                    <a href="faq.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        常见问题
                    </a>
                    <a href="privacy.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        隐私政策
                    </a>

                    <!-- GitHub 链接 -->
                    <a href="https://github.com/dext7r/linux-do-analyzer"
                       target="_blank"
                       class="hidden lg:flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105"
                       style="background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color);">
                        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
                             alt="GitHub" class="w-4 h-4 mr-2 opacity-70">
                        GitHub
                    </a>

                    <!-- 主题切换器 -->
                    <div class="relative">
                        <select id="themeSelector" class="appearance-none rounded-lg px-3 py-2 text-sm border focus:outline-none focus:ring-2 transition-all"
                                style="background: var(--card-bg); color: var(--text-color); border-color: var(--border-color); --tw-ring-color: var(--primary-color);">
                            <option value="apple">简洁</option>
                            <option value="xiaomi">现代</option>
                            <option value="huawei">商务</option>
                        </select>
                    </div>
                </div>

                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="mobileMenuBtn" class="flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
                            style="background: var(--card-bg); border: 1px solid var(--border-color);">
                        <i class="fas fa-bars" style="color: var(--text-color);"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端菜单 -->
            <div id="mobileMenu" class="md:hidden hidden">
                <div class="px-2 pt-2 pb-3 space-y-1 border-t" style="border-color: var(--border-color);">
                    <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        数据分析
                    </a>
                    <a href="help.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        使用帮助
                    </a>
                    <a href="about.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors" style="color: var(--primary-color); background: var(--primary-color); background-opacity: 0.1;">
                        关于我们
                    </a>
                    <a href="faq.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        常见问题
                    </a>
                    <a href="privacy.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        隐私政策
                    </a>

                    <!-- 移动端工具 -->
                    <div class="pt-3 border-t" style="border-color: var(--border-color);">
                        <div class="flex items-center justify-between px-3 py-2">
                            <span class="text-sm font-medium" style="color: var(--text-color);">主题</span>
                            <select id="mobileThemeSelector" class="appearance-none rounded px-2 py-1 text-sm border focus:outline-none"
                                    style="background: var(--card-bg); color: var(--text-color); border-color: var(--border-color);">
                                <option value="apple">简洁</option>
                                <option value="xiaomi">现代</option>
                                <option value="huawei">商务</option>
                            </select>
                        </div>
                        <a href="https://github.com/dext7r/linux-do-analyzer" target="_blank"
                           class="flex items-center px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
                                 alt="GitHub" class="w-5 h-5 mr-2 opacity-70">
                            GitHub 源码
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container mx-auto px-4 py-8 max-w-7xl">

        <!-- Header -->
        <header class="text-center mb-12">
            <div class="p-8 rounded-3xl shadow-lg" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <div class="w-16 h-16 mx-auto mb-6 rounded-2xl flex items-center justify-center" style="background: var(--primary-color);">
                    <i class="fas fa-info-circle text-white text-2xl"></i>
                </div>
                <h1 class="text-4xl font-bold mb-4" style="color: var(--text-color);">关于项目</h1>
                <p class="text-lg leading-relaxed" style="color: var(--text-secondary);">
                    为 Linux.do 社区用户量身打造的数据分析工具
                </p>
                <div class="flex items-center justify-center mt-6 space-x-4">
                    <a href="https://github.com/dext7r/linux-do-analyzer" target="_blank"
                       class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200"
                       style="background: var(--surface-secondary); color: var(--text-color); border: 1px solid var(--border-color);">
                        <i class="fab fa-github mr-2"></i>
                        GitHub
                    </a>
                    <a href="https://linux.do/" target="_blank"
                       class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200"
                       style="background: var(--primary-color); color: white;">
                        <i class="fas fa-users mr-2"></i>
                        Linux.do 社区
                    </a>
                </div>
            </div>
        </header>

        <!-- 项目简介 -->
        <section class="mb-8">
            <div class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-lightbulb text-yellow-500 mr-3"></i>
                    项目初衷
                </h2>

                <div class="prose max-w-none">
                    <p class="text-lg mb-4" style="color: var(--text-secondary);">
                        Linux.do 数据分析工具诞生于对数据可视化和隐私保护的双重需求。作为 Linux.do 社区的活跃用户，
                        我们深知了解自己在论坛中的活动轨迹和成长历程的重要性。
                    </p>

                    <p class="mb-4" style="color: var(--text-secondary);">
                        传统的在线数据分析工具往往需要上传用户数据到远程服务器，这存在隐私泄露的风险。
                        因此，我们开发了这款完全基于客户端的分析工具，确保您的数据始终在您的掌控之中。
                    </p>

                    <div class="grid md:grid-cols-3 gap-6 mt-6">
                        <div class="text-center p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <i class="fas fa-shield-alt text-green-500 text-2xl mb-3"></i>
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">隐私优先</h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                所有数据处理在本地完成，保护用户隐私
                            </p>
                        </div>

                        <div class="text-center p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <i class="fas fa-chart-bar text-blue-500 text-2xl mb-3"></i>
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">专业分析</h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                多维度数据分析，深入了解论坛活动
                            </p>
                        </div>

                        <div class="text-center p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <i class="fas fa-users text-purple-500 text-2xl mb-3"></i>
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">社区驱动</h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                为 Linux.do 社区用户定制开发
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 技术特性 -->
        <section class="mb-8">
            <div class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-cogs text-blue-500 mr-3"></i>
                    技术特性
                </h2>

                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-lg font-semibold mb-4" style="color: var(--text-color);">前端技术栈</h3>
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded bg-blue-500 flex items-center justify-center mr-3">
                                    <i class="fab fa-js-square text-white"></i>
                                </div>
                                <div>
                                    <div class="font-medium" style="color: var(--text-color);">Vanilla JavaScript</div>
                                    <div class="text-sm" style="color: var(--text-secondary);">原生 JS，无框架依赖</div>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded bg-cyan-500 flex items-center justify-center mr-3">
                                    <i class="fab fa-css3-alt text-white"></i>
                                </div>
                                <div>
                                    <div class="font-medium" style="color: var(--text-color);">TailwindCSS</div>
                                    <div class="text-sm" style="color: var(--text-secondary);">现代化 CSS 框架</div>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded bg-orange-500 flex items-center justify-center mr-3">
                                    <i class="fas fa-chart-bar text-white"></i>
                                </div>
                                <div>
                                    <div class="font-medium" style="color: var(--text-color);">Chart.js</div>
                                    <div class="text-sm" style="color: var(--text-secondary);">强大的图表可视化库</div>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded bg-yellow-500 flex items-center justify-center mr-3">
                                    <i class="fas fa-file-archive text-white"></i>
                                </div>
                                <div>
                                    <div class="font-medium" style="color: var(--text-color);">JSZip</div>
                                    <div class="text-sm" style="color: var(--text-secondary);">客户端 ZIP 文件处理</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-4" style="color: var(--text-color);">核心能力</h3>
                        <div class="space-y-3">
                            <div class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-3 mt-1"></i>
                                <div>
                                    <div class="font-medium" style="color: var(--text-color);">数据解析</div>
                                    <div class="text-sm" style="color: var(--text-secondary);">支持多种 CSV/JSON 格式</div>
                                </div>
                            </div>

                            <div class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-3 mt-1"></i>
                                <div>
                                    <div class="font-medium" style="color: var(--text-color);">可视化分析</div>
                                    <div class="text-sm" style="color: var(--text-secondary);">交互式图表和统计报告</div>
                                </div>
                            </div>

                            <div class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-3 mt-1"></i>
                                <div>
                                    <div class="font-medium" style="color: var(--text-color);">本地存储</div>
                                    <div class="text-sm" style="color: var(--text-secondary);">IndexedDB 数据持久化</div>
                                </div>
                            </div>

                            <div class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-3 mt-1"></i>
                                <div>
                                    <div class="font-medium" style="color: var(--text-color);">响应式设计</div>
                                    <div class="text-sm" style="color: var(--text-secondary);">完美适配各种设备</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 开发团队 -->
        <section class="mb-8">
            <div class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-users text-purple-500 mr-3"></i>
                    开发团队
                </h2>

                <div class="text-center">
                    <div class="inline-block p-6 rounded-2xl" style="background: var(--surface-secondary);">
                        <div class="w-20 h-20 mx-auto mb-4 rounded-full flex items-center justify-center text-2xl font-bold"
                             style="background: var(--primary-color); color: white;">
                            D
                        </div>
                        <h3 class="text-xl font-bold mb-2" style="color: var(--text-color);">dext7r</h3>
                        <p class="text-sm mb-4" style="color: var(--text-secondary);">
                            项目创始人 & 主要开发者
                        </p>
                        <div class="flex items-center justify-center space-x-4">
                            <a href="https://github.com/dext7r" target="_blank"
                               class="text-sm hover:opacity-70 transition-opacity"
                               style="color: var(--primary-color);">
                                <i class="fab fa-github mr-1"></i>
                                GitHub
                            </a>
                            <a href="https://linux.do/" target="_blank"
                               class="text-sm hover:opacity-70 transition-opacity"
                               style="color: var(--primary-color);">
                                <i class="fas fa-users mr-1"></i>
                                Linux.do
                            </a>
                        </div>
                    </div>
                </div>

                <div class="mt-8 text-center">
                    <p style="color: var(--text-secondary);">
                        我们是一个开放的社区项目，欢迎所有开发者参与贡献！
                    </p>
                    <a href="https://github.com/dext7r/linux-do-analyzer/blob/main/CONTRIBUTING.md" target="_blank"
                       class="inline-flex items-center mt-4 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200"
                       style="background: var(--primary-color); color: white;">
                        <i class="fas fa-hands-helping mr-2"></i>
                        参与贡献
                    </a>
                </div>
            </div>
        </section>

        <!-- 开源声明 -->
        <section class="mb-8">
            <div class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-code text-green-500 mr-3"></i>
                    开源协议
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <div class="p-4 rounded-lg border-l-4 border-green-500" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">MIT 许可证</h3>
                            <p class="text-sm mb-3" style="color: var(--text-secondary);">
                                本项目采用 MIT 开源许可证，您可以自由使用、修改和分发。
                            </p>
                            <div class="flex flex-wrap gap-2 text-xs">
                                <span class="px-2 py-1 rounded" style="background: var(--primary-color); color: white;">
                                    ✓ 商业使用
                                </span>
                                <span class="px-2 py-1 rounded" style="background: var(--primary-color); color: white;">
                                    ✓ 修改
                                </span>
                                <span class="px-2 py-1 rounded" style="background: var(--primary-color); color: white;">
                                    ✓ 分发
                                </span>
                                <span class="px-2 py-1 rounded" style="background: var(--primary-color); color: white;">
                                    ✓ 私人使用
                                </span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="p-4 rounded-lg border-l-4 border-blue-500" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">开源贡献</h3>
                            <p class="text-sm mb-3" style="color: var(--text-secondary);">
                                我们欢迎各种形式的贡献，包括但不限于：
                            </p>
                            <ul class="text-sm space-y-1">
                                <li style="color: var(--text-secondary);">• 功能改进和新特性</li>
                                <li style="color: var(--text-secondary);">• 问题反馈和 Bug 修复</li>
                                <li style="color: var(--text-secondary);">• 文档完善和翻译</li>
                                <li style="color: var(--text-secondary);">• UI/UX 设计优化</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 致谢 -->
        <section class="mb-8">
            <div class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-heart text-red-500 mr-3"></i>
                    特别致谢
                </h2>

                <div class="space-y-6">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-3 flex items-center" style="color: var(--text-color);">
                                <i class="fas fa-users text-blue-500 mr-2"></i>
                                Linux.do 社区
                            </h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                感谢 Linux.do 社区提供了优质的技术交流平台，为我们的项目提供了灵感和用户反馈。
                            </p>
                        </div>

                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-3 flex items-center" style="color: var(--text-color);">
                                <i class="fas fa-code text-green-500 mr-2"></i>
                                开源项目
                            </h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                感谢所有使用的开源库和框架的维护者，让我们能够站在巨人的肩膀上构建这个工具。
                            </p>
                        </div>
                    </div>

                    <div class="text-center">
                        <div class="p-6 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-3" style="color: var(--text-color);">技术栈致谢</h3>
                            <div class="flex flex-wrap justify-center gap-4 text-sm">
                                <span class="flex items-center">
                                    <i class="fab fa-js-square text-yellow-500 mr-1"></i>
                                    JavaScript
                                </span>
                                <span class="flex items-center">
                                    <i class="fab fa-css3-alt text-blue-500 mr-1"></i>
                                    TailwindCSS
                                </span>
                                <span class="flex items-center">
                                    <i class="fas fa-chart-bar text-orange-500 mr-1"></i>
                                    Chart.js
                                </span>
                                <span class="flex items-center">
                                    <i class="fab fa-html5 text-red-500 mr-1"></i>
                                    HTML5
                                </span>
                                <span class="flex items-center">
                                    <i class="fas fa-database text-purple-500 mr-1"></i>
                                    IndexedDB
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 版本信息 -->
        <section class="mb-8">
            <div class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-tag text-orange-500 mr-3"></i>
                    版本信息
                </h2>

                <div class="grid md:grid-cols-3 gap-6">
                    <div class="text-center p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <div class="text-2xl font-bold mb-2" style="color: var(--primary-color);">v2.0.0</div>
                        <div class="text-sm" style="color: var(--text-secondary);">当前版本</div>
                    </div>

                    <div class="text-center p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <div class="text-2xl font-bold mb-2" style="color: var(--primary-color);">2025</div>
                        <div class="text-sm" style="color: var(--text-secondary);">开发年份</div>
                    </div>

                    <div class="text-center p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <div class="text-2xl font-bold mb-2" style="color: var(--primary-color);">MIT</div>
                        <div class="text-sm" style="color: var(--text-secondary);">开源协议</div>
                    </div>
                </div>

                <div class="mt-6 p-4 rounded-lg border-l-4 border-blue-500" style="background: var(--surface-secondary);">
                    <h3 class="font-semibold mb-2" style="color: var(--text-color);">最新更新</h3>
                    <ul class="text-sm space-y-1">
                        <li style="color: var(--text-secondary);">• 重构为纯前端应用，提升隐私保护</li>
                        <li style="color: var(--text-secondary);">• 新增三种专业主题风格</li>
                        <li style="color: var(--text-secondary);">• 完善移动端适配和响应式设计</li>
                        <li style="color: var(--text-secondary);">• 优化数据分析算法和可视化效果</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 联系方式 -->
        <section class="mb-8">
            <div class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-envelope text-blue-500 mr-3"></i>
                    联系我们
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">项目仓库</h3>
                            <a href="https://github.com/dext7r/linux-do-analyzer" target="_blank"
                               class="inline-flex items-center text-sm hover:opacity-70 transition-opacity"
                               style="color: var(--primary-color);">
                                <i class="fab fa-github mr-2"></i>
                                dext7r/linux-do-analyzer
                            </a>
                        </div>

                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">问题反馈</h3>
                            <a href="https://github.com/dext7r/linux-do-analyzer/issues" target="_blank"
                               class="inline-flex items-center text-sm hover:opacity-70 transition-opacity"
                               style="color: var(--primary-color);">
                                <i class="fas fa-bug mr-2"></i>
                                提交 Issue
                            </a>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">社区讨论</h3>
                            <a href="https://linux.do/" target="_blank"
                               class="inline-flex items-center text-sm hover:opacity-70 transition-opacity"
                               style="color: var(--primary-color);">
                                <i class="fas fa-users mr-2"></i>
                                Linux.do 论坛
                            </a>
                        </div>

                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">功能建议</h3>
                            <a href="https://github.com/dext7r/linux-do-analyzer/discussions" target="_blank"
                               class="inline-flex items-center text-sm hover:opacity-70 transition-opacity"
                               style="color: var(--primary-color);">
                                <i class="fas fa-lightbulb mr-2"></i>
                                GitHub Discussions
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>

    <!-- Footer -->
    <footer class="relative z-10 bg-white border-t border-gray-200 overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 opacity-30">
            <!-- 光晕效果 -->
            <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-100 rounded-full filter blur-3xl"></div>
            <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-100 rounded-full filter blur-3xl"></div>
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- 主要内容区域 -->
            <div class="py-16">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <!-- 品牌介绍 -->
                    <div class="md:col-span-2">
                        <div class="flex items-center space-x-3 mb-6">
                            <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
                                <span class="text-white text-2xl">📊</span>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-gray-800">
                                    Linux.do Analyzer
                                </h3>
                                <p class="text-sm text-gray-600">专业的论坛数据分析工具</p>
                            </div>
                        </div>
                        <p class="text-gray-600 leading-relaxed mb-6 max-w-md">
                            为 Linux.do 社区用户提供专业的个人数据分析服务，
                            100% 本地处理，保护隐私安全，助您深入了解自己的论坛活动模式。
                        </p>

                        <!-- 特性标签 -->
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-indigo-500/20 text-indigo-300 rounded-full text-xs font-medium border border-indigo-500/30">
                                🔒 隐私保护
                            </span>
                            <span class="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-xs font-medium border border-green-500/30">
                                📊 数据可视化
                            </span>
                            <span class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-xs font-medium border border-purple-500/30">
                                ⚡ 实时分析
                            </span>
                        </div>
                    </div>

                    <!-- 快速链接 -->
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-gray-800">快速导航</h4>
                        <ul class="space-y-3">
                            <li>
                                <a href="index.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-chart-bar mr-2 group-hover:text-indigo-400"></i>
                                    数据分析
                                </a>
                            </li>
                            <li>
                                <a href="help.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-question-circle mr-2 group-hover:text-blue-400"></i>
                                    使用帮助
                                </a>
                            </li>
                            <li>
                                <a href="faq.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-comments mr-2 group-hover:text-green-400"></i>
                                    常见问题
                                </a>
                            </li>
                            <li>
                                <a href="privacy.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-shield-alt mr-2 group-hover:text-purple-400"></i>
                                    隐私政策
                                </a>
                            </li>
                        </ul>
                    </div>

                    <!-- 社区连接 -->
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-gray-800">社区连接</h4>
                        <ul class="space-y-3">
                            <li>
                                <a href="https://linux.do" target="_blank" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-external-link-alt mr-2 group-hover:text-orange-400"></i>
                                    Linux.do 论坛
                                </a>
                            </li>
                            <li>
                                <a href="https://github.com/dext7r/linux-do-analyzer" target="_blank" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" class="w-4 h-4 mr-2 opacity-70 group-hover:opacity-100 transition-opacity">
                                    GitHub 源码
                                </a>
                            </li>
                            <li>
                                <a href="https://linux.do/t/topic/992628/9999" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-bug mr-2 group-hover:text-red-400"></i>
                                    反馈问题
                                </a>
                            </li>
                            <li>
                                <a href="about.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-info-circle mr-2 group-hover:text-blue-400"></i>
                                    关于项目
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 分隔线 -->
            <div class="border-t border-gray-700/50"></div>

            <!-- 底部信息 -->
            <div class="py-8">
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <!-- 版权信息 -->
                    <div class="text-center md:text-left">
                        <p class="text-gray-600 text-sm">
                            © 2025 Linux.do Analyzer. Made with
                            <i class="fas fa-heart text-red-500 mx-1"></i>
                            for Linux.do Community
                        </p>
                        <p class="text-gray-500 text-xs mt-1">
                            Powered by Deno + TailwindCSS + Chart.js
                        </p>
                    </div>

                    <!-- 技术标识 -->
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-shield-alt text-green-500"></i>
                            <span>100% 本地处理</span>
                        </div>
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-lock text-blue-500"></i>
                            <span>数据安全</span>
                        </div>
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-code text-purple-500"></i>
                            <span>开源项目</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部装饰 -->
        <div class="h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop"
            class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 opacity-0 invisible z-50"
            title="返回顶部">
        <i class="fas fa-chevron-up"></i>
    </button>

    <script>
        // 主题管理
        class ThemeManager {
            constructor() {
                this.currentTheme = localStorage.getItem('app-theme') || 'apple';
                this.init();
            }

            init() {
                this.applyTheme(this.currentTheme);
                this.setupThemeSelector();
            }

            applyTheme(theme) {
                document.documentElement.removeAttribute('data-theme');
                if (theme !== 'apple') {
                    document.documentElement.setAttribute('data-theme', theme);
                }
                const selector = document.getElementById('themeSelector');
                if (selector) {
                    selector.value = theme;
                }
                localStorage.setItem('app-theme', theme);
            }

            setupThemeSelector() {
                const selector = document.getElementById('themeSelector');
                if (selector) {
                    selector.addEventListener('change', (e) => {
                        this.applyTheme(e.target.value);
                    });
                }
            }
        }

        // 初始化主题管理器
        document.addEventListener('DOMContentLoaded', () => {
            new ThemeManager();

            // 移动端菜单功能
            const mobileMenuBtn = document.getElementById('mobileMenuBtn');
            const mobileMenu = document.getElementById('mobileMenu');
            const mobileMenuIcon = mobileMenuBtn.querySelector('i');

            mobileMenuBtn.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
                mobileMenuIcon.classList.toggle('fa-bars');
                mobileMenuIcon.classList.toggle('fa-times');
            });

            // 同步主题选择器
            const themeSelector = document.getElementById('themeSelector');
            const mobileThemeSelector = document.getElementById('mobileThemeSelector');

            themeSelector.addEventListener('change', function() {
                mobileThemeSelector.value = this.value;
            });

            mobileThemeSelector.addEventListener('change', function() {
                themeSelector.value = this.value;
                // 触发主题切换事件
                const event = new Event('change');
                themeSelector.dispatchEvent(event);
            });

            // 返回顶部按钮功能
            const backToTopButton = document.getElementById('backToTop');

            // 监听滚动事件 - 控制返回顶部按钮显示
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopButton.classList.remove('opacity-0', 'invisible');
                    backToTopButton.classList.add('opacity-100', 'visible');
                } else {
                    backToTopButton.classList.add('opacity-0', 'invisible');
                    backToTopButton.classList.remove('opacity-100', 'visible');
                }
            });

            // 点击返回顶部
            backToTopButton.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });
    </script>

</body>
</html>
